<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画帧</title>
    <style>
        @keyframes horse {
            /* 动画-马 */
            0% {
                /* transform: translateX(0px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse01.png);
            }
            9.1% {
                /* transform: translateX(30px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse02.png);
            }
            18.2% {
                /* transform: translateX(60px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse03.png);
            }
            27.3% {
                /* transform: translateX(90px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse04.png);
            }
            36.4% {
                /* transform: translateX(120px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse05.png);
            }
            45.5% {
                /* transform: translateX(150px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse06.png);
            }
            54.6% {
                /* transform: translateX(180px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse07.png);
            }
            63.7% {
                /* transform: translateX(210px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse08.png);
            }
            72.8% {
                /* transform: translateX(240px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse09.png);
            }
            81.9% {
                /* transform: translateX(270px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse10.png);
            }
            91% {
                /* transform: translateX(300px); */
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse11.png);
            }
            100% {
                transform: translateX(330px);
                background-image: url(https://wyh2085195880.gitee.io/html5_picture/%E7%AC%AC%E4%B8%89%E7%AB%A0/%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6/%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90-%E9%A9%AC/horse12.png);
            }
        }
        
        @keyframes windmill {
            /* 风车动画 */
            0% {
                transform: rotate(0deg);
            }
            10% {
                transform: rotate(36deg);
            }
            20% {
                transform: rotate(72deg);
            }
            30% {
                transform: rotate(108deg);
            }
            40% {
                transform: rotate(144deg);
            }
            50% {
                transform: rotate(180deg);
            }
            60% {
                transform: rotate(216deg);
            }
            70% {
                transform: rotate(252deg);
            }
            80% {
                transform: rotate(288deg);
            }
            90% {
                transform: rotate(324deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        
        @keyframes square {
            /* 正方形动画 */
            0% {
                transform: translateX(100px) translateY(100px);
            }
            25% {
                transform: rotate(45deg) translateX(-400px) translateY(400px);
            }
            50% {
                transform: translateX(-400px) translateY(400px);
            }
            75% {
                transform: rotate(-45deg) translateX(100px) translateY(100px);
            }
            100% {
                transform: rotate(360deg) translateX(100px) translateY(100px);
            }
        }
        
        .horse {
            width: 1024px;
            height: 130px;
            /* animation: horse 3s linear infinite; */
        }
        
        .windmill {
            margin: 200px;
            width: 500px;
            height: 500px;
            animation: windmill 1s linear infinite;
            background: url(https://img1.baidu.com/it/u=3687416476,591489337&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500) no-repeat;
        }
        
        .square {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: square 3s linear infinite;
            /* 通过以下三行代码可将元素固定在页面某个位置 */
            position: fixed;
            top: 150px;
            right: 150px;
        }
        
        .horse:hover {
            /* 鼠标覆盖生效 */
            animation: horse 3s linear infinite;
        }
        
        .box {
            display: block;
            float: left;
        }
    </style>
</head>

<body>
    <p class="box">鼠标放在这开始</p>
    <div class="horse"></div>
    <div class="windmill"></div>
    <div class="square"></div>
</body>

</html>